<template>
  <div>
    <div class="columns">
      <oolongSteps :current="1">
        <oolongStep title="已完成" content="这里是该步骤的描述信息"></oolongStep>
        <oolongStep title="进行中" content="这里是该步骤的描述信息"></oolongStep>
        <oolongStep title="待进行" content="这里是该步骤的描述信息"></oolongStep>
        <oolongStep title="待进行" content="这里是该步骤的描述信息"></oolongStep>
      </oolongSteps>
    </div>
    <div class="columns">
      <oolongSteps :current="2" size="small">
        <oolongStep title="已完成"></oolongStep>
        <oolongStep title="进行中"></oolongStep>
        <oolongStep title="待进行"></oolongStep>
        <oolongStep title="待进行"></oolongStep>
      </oolongSteps>
    </div>
    <div class="columns">
      <oolongSteps :current="1">
        <oolongStep title="注册" icon="ios-person"></oolongStep>
        <oolongStep title="上传头像" icon="ios-camera"></oolongStep>
        <oolongStep title="验证邮箱" icon="ios-mail"></oolongStep>
      </oolongSteps>
    </div>
  </div>
</template>

<script>
export default {
  name: 'steps'
}
</script>

<style scoped>

</style>
